<template>
  <div style="">
    <el-button style="float:right;margin-bottom: 10px;margin-right: 40px" type="success" @click = "addUser">新增用户</el-button>
    <el-table
      :data="userList"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="createTime"
        label="创建时间"
        :formatter="formatTime"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="userType"
        label="用户类型"
        :formatter="getUserType"
        width="180">
      </el-table-column>
      <el-table-column
        prop="number"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="用户名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteById(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[pageSize, pageSize*2, pageSize*4, pageSize*8]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <add ref="add"></add>
  </div>
</template>

<script>
import UserService from "@/api/UserService";
import Add from "./add";
export default {
  name: "userList",
  components: {Add},
  data() {
    return {
      currentPage:1,
      userList: null,
      queryParams:{
        pageIndex:1,
        pageSize:2,
        userType:null,
        userName:'',
        number:'',
        phone:'',
      },
      pageSize: 2,
      total:null,
    }
  },

  created(){
    this.getUserPage()
  },

  methods: {
    getUserPage(){
      var that = this;
      UserService.getUserPage(that.queryParams,function (data){
        console.log("UserService.getUserPage-----========--------=====")
        console.log(data)
        that.userList = data.records
        that.total = data.total
      },function (error){
        console.log(error)
      })
    },

    deleteById(row){
      console.log(row);
      var that = this;
      this.$confirm('此操作将永久删除用户, 是否继续?', '删除警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("确定删除---------------")
        UserService.deleteById(row.id,function (data) {
          if (data === true){
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
            that.getUserPage()
          }else {
            that.$message({
              type: 'warning',
              message: '删除失败!'
            });
          }
        },function (error) {
          that.$message.error("系统异常，删除失败！");
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    tableRowClassName({row, rowIndex}) {
      console.log(row)
      if (rowIndex === 1) {
        console.log("=================---------------------")
        console.log(rowIndex)
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getUserPage(this.queryParams)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageIndex = val;
      this.getUserPage(this.queryParams)
    },

    // 时间戳转换时间
    formatTime(row, column){
      if (row.createTime!=null){
        console.log(row.createTime)
        // var date = new Date(row.createTime)
        // let Y = date.getFullYear() + '-';
        // let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        // let D = date.getDate() + ' ';
        // let h = date.getHours() + ':';
        // let m = date.getMinutes() + ':';
        // let s = date.getSeconds();
        // return Y+M+D+h+m+s;
        var date = new Date(row.createTime);
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD +" "+hh + mm + ss;
        // return new Date(parseInt(row.createTime)).toLocaleString().replace(/:\d{1,2}$/,' ');
        // return row.createTime.substr(0,10)
      }
    },

    getUserType(row){
      console.log(row)
      if (row.userType===1){
        return "管理员";
      }else if(row.userType===2){
        return "教师";
      }else if(row.userType===3){
        return "学生";
      }
    },

    addUser(){
      this.$refs.add.openDialog();
    },

    edit(row) {
      console.log(row);
      this.$refs.add.openDialogUpdate(row)
    },

  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
